<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <style>
        form{
            width: 300px;
            margin:0 auto;
            padding:20px;
            border: 1px soild #c40d0d;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        h2{
            margin-top: 0;
        }
        label{
            display: block; /*将label显示为块级元素*/
            margin-bottom:5px;
        }
        input[type="text"],input[type="password"]{
            width: 100%;
            padding: 10px;
            margin-bottom:15px;
            border: 1px soild #ccc;
            border-radius: 3px;
        }
        input[type="submit"]{
            background-color: #4caf50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        input[type="submit"]:hover{
            background-color: #45a049;

        }
    </style>
</head>
<body>
    <form action="">
        <h2>登录</h2>
        <label for="username">用户名：</label><br>
        <input type="text" id="username" name="username"><br>
        <label for="password">密码：</label><br>
        <input type="text" id="password" name="password"><br>
        <input type="submit" value="登录">
    </form>
    <script>
        // 获取表单
        const form = document.querySelector('form');
        const usernameInput = document.getElementById('username')
        const passwordInput = document.getElementById('password')
        form.addEventListener('submit',function(event){
            event.preventDefault();
            const username = usernameInput.value;
            const password = passwordInput.value;
            if(username.trim() === '' || password.trim() === ''){
                alert('用户名和密码不能为空');
            }else{
                alert('登录成功！！')
            }
        })
    </script>
</body>
</html>